<template>
    <div class="config" :class="configPanel ?'show':''">
        <!-- 箭头 -->
        <span class="arrow" @click="configPanel = !configPanel"></span>
        <ul class="action">
            <!-- 节点操作 -->
            <NodeConfig v-if="type === 'node'" :node="node" @change="change" :str="str"/>
            <!-- 边操作 -->
            <EdgeConfig v-if="type === 'edge'" :node="node" @change="change" :str="str"/>
            <!-- combo操作 -->
            <ComboConfig v-if="type === 'combo'" :node="node" @change="change" :str="str"/>
            <!-- 导出 -->
            <li @click="saveJson">
                <el-tooltip effect="dark" content="获取json" placement="left">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-JSON"></use>
                    </svg>
                </el-tooltip>
            </li>
            <li @click="exportImage">
                <el-tooltip effect="dark" content="导出图片" placement="left">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                </el-tooltip>
            </li>

        </ul>
    </div>
</template>

<script lang='ts' setup>

import { ref, watch } from 'vue';
import NodeConfig  from './node.vue'
import EdgeConfig  from './edge.vue'
import ComboConfig from './combo.vue'
/**
 * 右侧配置栏
*/

interface IProps {
    node: any,
    type: string
}
const props = defineProps<IProps>()

let node = ref({})
let str = ref("")
watch(props, (nv, ov) => {
    if (nv.type) {
        node.value = nv.node
        // 触发watch,保证视图更新
        setTimeout(() => {
            str.value = Math.random() + ''
        }, 50);
    }
}, {
    deep: true
})
let configPanel = ref(true)
const emit = defineEmits(['change', 'saveJson', 'exportImageDownload'])
const change = (item:any) =>{
    emit('change',item)
}
// 获取json数据
const saveJson = () => {
    emit('saveJson')
}
// 导出图片
const exportImage = () => {
    emit('exportImageDownload')
}

</script>

<style lang="less" scope>
.config {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 20px;
    height: calc(100vh - 40px);
    background-color: inherit;
    box-shadow: 9px 0px 26px 2px #ccc;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 9;

    .arrow {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #fff;
        left: -30px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        transition: transform .3s ease-in-out;
        border-radius: 100%;
        box-shadow: -3px 0px 5px 0px #ccc;
        cursor: pointer;

        &::after {
            content: "";
            position: absolute;
            left: calc(50% + 3px);
            top: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            width: 15px;
            height: 15px;
            border-left: 2px solid #000;
            border-top: 2px solid #000;
        }
    }
}

.show {
    transform: translateX(0);

    .arrow {
        transform: translateY(-50%) rotate(180deg);
        box-shadow: 3px 0px 5px 0px #ccc;
    }
}

.action {
    list-style: none;
    padding: 0px;
    margin: 0px;

    li {
        text-align: center;
        position: relative;
        transition: all .3s;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
            box-shadow: 0px 0px 3px 2px #ccc;
            border-radius: 8px;

            .icon,
            .color {
                transform: scale(1.3);
            }

            .suoxiao {
                transform: rotate(-45deg) scale(1.3);
            }

            .suoxiao1 {
                transform: rotate(45deg) scale(1.3);
            }
        }

        .icon {
            width: 30px;
            height: 30px;
            margin: 10px;
            transition: all .45s;
            cursor: pointer;
        }
    }

    .suoxiao {
        transform: rotate(-45deg);
    }

    .suoxiao1 {
        transform: rotate(45deg);
    }
}

.color {
    margin: 10px;
}

.big {
    transform: scale(1.1);
}

.small {
    width: 20px !important;
}
</style>